<template>
<h1>员工列表页面(组合式)</h1>
  <input type="text" placeholder="姓名" v-model="emp.name">
  <input type="text" placeholder="工资" v-model="emp.salary">
  <input type="text" placeholder="工作" v-model="emp.job">
  <input type="button" value="添加" @click="add()">
  <hr>
  <table border="1">
    <caption>员工列表</caption>
    <tr><th>编号</th><th>姓名</th><th>工资</th><th>工作</th><th>操作</th></tr>
    <tr v-for="(emp,i) in arr">
      <td>{{i+1}}</td>
      <td>{{emp.name}}</td>
      <td>{{emp.salary}}</td><td>{{emp.job}}</td>
      <td><input type="button" value="删除" @click="del(i)"></td>
    </tr>
  </table>
</template>


<script setup>
  //组合式风格是将data和method写在一起,可以按照业务划分,便于重用
  //和页面绑定的变量称为响应式变量 一般使用const修饰,表示为常量
  import {ref} from "vue";
  //响应式变量 必须使用ref()函数包裹
  const emp = ref({name:"",salary:"",job:""});
  const arr = ref([{name:"张三",salary:3000,job:"销售"},{name:"李四",salary:4000,job:"人事"}])
  //使用箭头函数定义方法
  const add = ()=>{
    //访问响应式变量的内容需要 变量名.value的方式
    let newEmp = {name:emp.value.name,salary: emp.value.salary,job: emp.value.job};
    arr.value.push(newEmp);
  }
  const del = (i)=>{
    arr.value.splice(i,1);
  }


</script>

<style scoped>

</style>